<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片库</title>

    <link href="./../CSS/imageGallery.css" rel="stylesheet" media="screen">
</head>
<body>
    <h1>Snapshots</h1>
    <ul id="imageGallery">
        <!--在下面的函数中，this表示当前节点对象，return false;
            是让onclick事件处理函数认为该链接没有被点击。
            当返回true时，虽然showPic()函数被执行，但还是会进行链接的跳转
        -->
        <li>
            <a href="./../Images/1.jpg" title="1">第一张</a>
        </li>
        <li>
            <a href="./../Images/2.jpg" title="2">第二张</a>
        </li>
        <li>
            <a href="./../Images/3.jpg" title="3">第三张</a>
        </li>
        <li>
            <a href="./../Images/4.jpg" title="4">第四张</a>
        </li>
        <li>
            <a href="./../Images/5.jpg" title="5">第五张</a>
        </li>
        <li>
            <a href="./../Images/6.jpg" title="6">第六张</a>
        </li>
        <li>
            <a href="./../Images/7.jpg" title="7" onclick="showPic(this); return false;">第七张</a>
        </li>
        <li>
            <a href="./../Images/8.gif" title="8" onclick="showPic(this); return false;">第八张</a>
        </li>
        <li>
            <a href="./../Images/9.jpg" title="9" onclick="showPic(this); return false;">第九张</a>
        </li>
        <li>
            <a href="./../Images/10.jpg" title="10" onclick="showPic(this); return false;">第十张</a>
        </li>
        <li>
            <a href="./../Images/11.jpg" title="11" onclick="showPic(this); return false;">第十一张</a>
        </li>
        <li>
            <a href="./../Images/12.png" title="12" onclick="showPic(this); return false;">第十二张</a>
        </li>
    </ul>

    <img src="" alt="my image gallery" id="placeholder">
    <p id="description">选择一个图片</p>

    <script src="./../JavaScript/imageGallery.js"></script>
</body>
</html>